<template>
<div class="contents">
	<div class="top">	{{cfg.title}}	</div>
	<div class="main">
		<el-row>
			<el-col :span="4" class="col4">    
				<div class="span3" v-for="item in cfg.names" :key="item"  v-show="(!item.hasOwnProperty('show'))||(item.hasOwnProperty('show')&&item.show)" :readonly="item.readonly" :disabled="item.disabled" >
					<label >{{item.name}}：</label>	     
				</div>    
			</el-col>
			<el-col :span="20" class="col20" v-model="values">            
				<div class="span17" v-for="item in cfg.types" :key="item.type + item.inputType + item.error"  v-show="(!item.hasOwnProperty('show'))||(item.hasOwnProperty('show')&&item.show)" :readonly="item.readonly" :disabled="item.disabled" >
          <!-- type=='input' -->
					<el-input v-if="item.type=='input'" v-model="values[item.name]"  :type="item.inputType" class="span17_elinput" v-show="(!item.hasOwnProperty('show'))||(item.hasOwnProperty('show')&&item.show)" :readonly="item.readonly" :disabled="item.disabled"></el-input>               
					<span v-if="item.type=='input'" v-show="!item.reg.test(values[item.name])" class="text-style" > {{ item.error }} </span>  
           <!-- type=='select' -->
          <select v-if="item.type=='select'" v-model="values[item.name]"   class="span17_elinput">
            <option v-for="option in item.options" :key="option.value" :value="option.value">{{option.name}}</option>
          </select>
           <!-- type=='checkbox' -->
          <el-checkbox v-if="item.type=='checkbox'" v-model="values[item.name]"   >{{item.label}}</el-checkbox>   
           <!-- type=='radio-group' -->
          <el-radio-group v-if="item.type=='radio-group'" v-model="values[item.name]"  >
            <el-radio v-for="radio in item.labels" :key="radio.value" :label="radio.name"></el-radio>
          </el-radio-group>
				</div>  
			</el-col>
		</el-row>
    <el-button class="btnsave" @click="onSave" >{{$t('message.save')}}</el-button>
	</div>	 
</div>  

</template>

<script>
export default {
  props: ["cfg", "values", "onSave"],
  computed:{
    hasErr(){

    }
  },
  data() {
    return {
      // 示例：
      // cfg: {
      //   title: "标题",
      //   names: ["名称1", "名称2", "名称3"],
      //   types: [
      //     {
      //       type: "input",
      //       inputType: 'text',
      //       reg: /^a/,
      //       error: "错误信息1"
      //     },
      //     {
      //       type: "input",
      //       inputType: 'number',
      //       reg: /^1|2|3/,
      //       error: "错误信息2"
      //     },
      //     {
      //       type: "select",
      //       options: [
      //         {
      //           name: "label1",
      //           value: "value1"
      //         },
      //         {
      //           name: "labe2",
      //           value: "value2"
      //         }
      //       ]
      //     }
      //   ],
      //   values: ["a", 1, "value2"]
      // }
    };
  }
};
</script>
<style>
@import "../style/common.css";
.contents {
  width: 100%;
}
.top {
  background-color: #eff2f7;
  color: #333;
  text-align: left;
  padding-left: 10px;
  line-height: 60px;
}

.main {
  background-color: #fff;
  color: #333;
  text-align: left;
  padding: 20px;
  padding: 2%;
  /* line-height: 150px; */
  box-shadow: 1px 2px 1px #eff2f7;
}

.el-input {
  display: inline-block;
  width: 300px;
  margin-bottom: 10px;
}
</style>

